<template>
    <view class="Wrapper" :style="{ '--color': color, height: System.windowHeight + 'px' }">
        <!-- , backgroundImage: `url(${bgImg})`  -->
        <status-bar title=" " hideBg="1" statusHeight backColor :back="back"></status-bar>
        <showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>

        <view class="Content">
            <view class="tabBox">
                <view class="openDate">
                    <u-tabs :list="open_date" lineColor="transparent" @click="click" :inactiveStyle="inactiveStyle" :activeStyle="activeStyle" :current="current"></u-tabs>
                </view>
                <view class="moreData" @click.stop="show = true">更多日期</view>
            </view>
            <swiper
                :indicator-dots="false"
                :current="curIndex"
                class="Swiper"
                :autoplay="false"
                :interval="3000"
                previous-margin="180rpx"
                next-margin="180rpx"
                :duration="1000"
                @change="change"
                v-for="(item, index) in site_time"
                :key="index"
                v-if="current == index"
            >
                <swiper-item class="swiperItem" v-for="(subItem, subIndex) in item" :key="subIndex">
                    <view class="Box" :class="subIndex == curIndex ? 'ActiveBox' : 'NoActiveBox'">
                        <text class="name">{{ subItem.name }}</text>
                        <view class="priceBox">
                            <view class="prilist" v-for="(tItem, tIndex) in subItem.all_price_info" :key="tIndex">{{ tItem.data }}</view>
                        </view>
                        <view class="Kdata a-self-start">开宴时间:{{ subItem.open_time }}</view>
                    </view>
                </swiper-item>
            </swiper>

            <image :src="selectImg" class="selectImg" @click="NowReserve"></image>
        </view>
        <u-popup :show="showContent" mode="center" :round="10" :safeAreaInsetBottom="false">
            <view class="sowCones">
                <text class="row j-centert black size34 bold">预定须知</text>
                <view class="cponView">
                    <u-parse :content="site_config.content"></u-parse>
                </view>
                <view class="botFots">
                    <view class="notcontis" @click="ageBtn">
                        <text class="white size28">我已阅读并同意此协议</text>
                        <text class="size28 white" v-if="ageTime > 0">({{ ageTime }}s)</text>
                    </view>
                </view>
            </view>
        </u-popup>

        <block v-if="isOk">
            <u-popup :show="isOk" mode="center" :round="10" :safeAreaInsetBottom="false">
                <view class="sowConeBox" v-if="reconfirmData">
                    <text class="size32 bold black p-top10 p-bot10 t-letter4">您想预订的餐秀</text>
                    <view class="row a-center color_33 size28 p-top12">宴会日期：{{ open_date[current].name }}</view>
                    <view class="row a-center color_33 size28 p-top12">宴会名称：{{ reconfirmData.name }}</view>
                    <view class="row a-center color_33 size28 p-top12">开宴时间：{{ reconfirmData.open_time }}</view>
                    <view class="row a-center color_33 size28 p-top12">宴席剩余：{{ reconfirmData.available_site }}</view>
                    <view class="row a-center color_33 size28 p-top12">妆造剩余：{{ reconfirmData.make_up_num }}</view>
                    <view class="row j-sa a-center m-top30 m-bot10">
                        <view class="okbtn Cancel" @click="isOk = false">取消</view>
                        <view class="okbtn Continue" @click="Config_btn">确定</view>
                    </view>
                </view>
            </u-popup>
        </block>

        <block v-if="show">
            <u-calendar
                :show="show"
                ref="calendar"
                :showSubtitle="false"
                mode="single"
                color="#275e58"
                :defaultDate="customList[current]"
                :customList="customList"
                monthNum="2"
                @confirm="confirm"
                @close="show = false"
            ></u-calendar>
        </block>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                showModal: false,
                bgImg: 'https://msraimgcdn.mogoie.com/6166/1760942916834.jpg',
                site_config: '',
                showContent: false,
                ageTime: 3,

                customList: [],
                open_date: [],
                site_time: [],
                current: 0,
                curIndex: 0,
                bgImg01: 'https://msraimgcdn.mogoie.com/6166/1760953023971.png',
                bgImg02: 'https://msraimgcdn.mogoie.com/6166/1760953029542.png',
                selectImg: 'https://msraimgcdn.mogoie.com/6166/1760947189227.png',
                noSelectImg: 'https://msraimgcdn.mogoie.com/6166/1760947271633.png',
                inactiveStyle: {
                    fontSize: '16px',
                    color: '#7c8323',
                    fontWeight: '500'
                },
                activeStyle: {
                    fontSize: '16px',
                    color: '#fbdc01',
                    fontWeight: '500'
                },

                show: false,

                color: '#d7b06d',

                ageFlge: false,
                ageDown: null,
                ageId: '',
                isOk: false,
                reconfirmData: ''
            };
        },

        onLoad() {
            this.getSiteTimeList();
        },

        methods: {
            getSiteTimeList() {
                this.$http
                    .get({
                        url: '/SiteApi/getSiteTimeList'
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const Result = res.data;
                        this.site_config = Result.site_config;
                        this.banner = Result.banner || [];
                        this.customList = Result.open_calender || [];
                        this.open_date = Result.open_date || [];
                        this.site_time = Result.site_time_day_time || [];
                        this.showContent = true;
                        this.ageDown = setInterval(() => {
                            if (this.ageTime > 0) {
                                this.ageTime--;
                            } else {
                                clearInterval(this.ageDown);
                            }
                        }, 1000);
                    });
            },

            change(e) {
                this.curIndex = e.detail.current;
            },
            NowReserve() {
                if (!this.vid) return (this.showModal = true);
                const reconfirmData = this.site_time[this.current][this.curIndex];
                if (reconfirmData.available_site == 0) return this.$Toast(`${reconfirmData.available_title} 暂不能预订`);
                this.reconfirmData = reconfirmData;
                this.isOk = true;
            },
            click(e) {
                this.curIndex = 0;
                this.current = e.index;
            },

            confirm(e) {
                const Index = this.customList.findIndex((n) => n == e[0]);
                this.current = Index;
                this.show = false;
            },

            ageBtn() {
                if (this.ageTime > 0) return;
                this.showContent = false;
            },
            CloseAge() {
                clearInterval(this.ageDown);
                this.showContent = false;
                this.ageTime = 3;
            },
            Config_btn() {
                this.isOk = false;
                this.toUrl(`Selectseat?id=${this.reconfirmData.id}`);
            }
        },
        onUnload() {
            clearInterval(this.ageDown);
            this.showContent = false;
        },
        onHide() {
            clearInterval(this.ageDown);
            this.showContent = false;
        },

        computed: {
            ...mapState(['vid', 'System', 'share'])
        },
        onShareAppMessage(res) {
            let share = this.share;
            return {
                title: share.title,
                desc: share.desc,
                path: `/pages/index/index?share_v_id=${this.vid}&pageType=999`,
                imageUrl: share.imageUrl
            };
        }
    };
</script>

<style lang="scss" scoped>
    .Wrapper {
        width: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background-image: url('https://msraimgcdn.mogoie.com/6166/1761025941784.jpg');
        background-repeat: no-repeat;
        background-size: contain;
    }
    .sowCones {
        width: 620rpx;
        padding: 20rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .cponView {
            width: 100%;
            height: 760rpx;
            overflow-y: scroll;
            padding: 30rpx 10rpx;
        }
        .botFots {
            width: 100%;
            height: 130rpx;
            display: flex;
            justify-content: center;
            align-items: center;

            .notcontis {
                width: 500rpx;
                height: 90rpx;
                background-color: $btnColor;
                border-radius: 10rpx;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
    .Content {
        width: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding-top: 590rpx;
        // margin-top: auto;
        // padding-bottom: 280rpx;
    }
    .tabBox {
        width: 100%;
        display: flex;
        align-items: center;
        .openDate {
            width: 510rpx;
            /deep/.u-tabs__wrapper__nav__item {
                padding: 0 13px !important;
                position: relative;
            }
            // /deep/.u-tabs__wrapper__nav__item::after {
            //     content: '';
            //     width: 10rpx;
            //     height: 10rpx;
            //     background-color: #fbdc01;
            //     border-radius: 50%;
            //     position: absolute;
            //     right: 0;
            // }
        }
        .moreData {
            width: 240rpx;
            color: #7c8323;
            font-size: 32rpx;
            font-weight: 500;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .Swiper {
        width: 100%;
        height: 400rpx;
        box-sizing: border-box;
        margin-top: 80rpx;

        .swiperItem {
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            .ActiveBox {
                width: 100%;
                height: 100%;
                color: #fbf83a;
                background-image: url('https://msraimgcdn.mogoie.com/6166/1760953029542.png');
                background-repeat: no-repeat;
                background-size: cover;
            }
            .NoActiveBox {
                width: 100%;
                height: 100%;
                color: #bdbd73;
                background-image: url('https://msraimgcdn.mogoie.com/6166/1760953023971.png');
                background-repeat: no-repeat;
                background-size: cover;
            }
            .Box {
                width: 286rpx;
                height: 390rpx;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                .name {
                    font-size: 38rpx;
                    text-align: center;
                    font-weight: bold;
                }
                .priceBox {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    margin-top: 20rpx;
                    padding-left: 18rpx;
                    .prilist {
                        width: 50%;
                        font-size: 20rpx;
                    }
                }
                .Kdata {
                    font-size: 24rpx;
                    padding-left: 16rpx;
                    margin-top: 10rpx;
                }
            }
        }
    }

    .selectImg {
        width: 290rpx !important;
        height: 69rpx !important;

        margin: 50rpx auto;
    }
    .sowConeBox {
        width: 620rpx;
        padding: 20rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .okbtn {
            width: 260rpx;
            height: 80rpx;
            border-radius: 10rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30rpx;
        }
        .Cancel {
            background-color: #f1f1f1;
            color: #999;
        }
        .Continue {
            background-color: $btnColor;
            color: #ffffff;
        }
    }
</style>
